<!DOCTYPE html>
<html class="g-html">
<head>
	<meta charset="utf-8" />
	<meta name="renderer" content="webkit" />
	<meta name="keywords" content="Nui,Nui框架,Nui组件,axnfex,诺诺框架,诺诺前端,爱信诺框架,爱信诺前端" />
	<meta name="description" content="Nui框架是诺诺网前端团队根据自身业务的特点开发出来的模块化前端框架，提供了丰富的组件以适应不同业务需求进行快速开发。" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Nui.js</title>
    <link rel="icon" type="image/vnd.microsoft.icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="icon" type="image/x-icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="shortcut icon" type="image/x-icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="stylesheet" type="text/css" href="/nui/assets/style/base-min.css?v=0de6a3f"/>
    
</head>
<body class="g-body">
	<!-- header -->
	<div class="g-header f-clearfix">
	    <a class="m-logo f-fl" href="/nui/">
            <img src="/nui/assets/images/logo.png?v=a987f30" alt="Nui.js" class="f-fl" />
            <em class="f-fl e-ml10 f-fs24">Nui.js</em>
        </a>
        <ul class="m-nav f-fr f-fs16">
            
	
	
    <li class="f-fl">
        <a class="s-crt" href="/nui/pages/">教程</a>
    </li>
    <li class="f-fl">
        <a href="https://axnfex.github.io/2017/02/28/jobs/" target="_blank">加入我们</a>
    </li>
    <li class="f-fl">
        <a href="http://zjaisino.github.io/" target="_blank">前端规范</a>
    </li>
    <li class="f-fl">
        <a href="https://axnfex.github.io/" target="_blank">团队博客</a>
    </li>


        </ul>
	</div>
	<!-- /header -->

	<!-- content -->
	<div class="g-content">
    
	<div class="g-main f-fr">
		<div class="mainbox">
			<h1 class="e-pt20 e-pb20 f-fs28">模版引擎</h1>
			<h2 class="e-pt20 e-pb10 f-fs22 f-bb" id="快速上手">快速上手</h2>
			<p class="e-mt15 f-lh22">使用时需先作为依赖引入</p>
<script type="text/highlight" data-javascript-options>
Nui.define(['template'], function(template){
	//do something
})
</script>
			<p class="e-mt15 f-lh22">模版引擎渲染有2种方式，一种是通过script标签渲染，另一种是直接渲染</p>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> script标签渲染模版</h3>
			<p class="e-mt15 f-lh22">在页面body中创建type="text/html"的script标签，并且包含id属性</p>
<script type="text/highlight" data-xml-options>
<div id="content"></div>
&lt;script type="text/html" id="tpl"&gt;
<ul>
<% if result === 'success' %>
	<% each list val key %>
	<li>姓名：<% val.name %> 职业：<% val.career %></li>
	<% /each %>
<% /if %>
</ul>
&lt;/script&gt;
&lt;script type="text/javascript" src="nui.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
Nui.load(./demo)
&lt;/script&gt;
</script>
<script type="text/highlight" data-javascript-options>
//demo.js
Nui.define(['template'], function(template){
	var data = {result:'success', list:[{
		name:'yinjiazeng',
		career:'jser'
	}, {
		name:'liumengmei',
		career:'f2er'
	}]}
	document.getElementById('content').innerHTML = template('tpl', data)
})
&lt;/script&gt;
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 直接渲染模板</h3>
<script type="text/highlight" data-javascript-options>
//demo.js
Nui.define(['template'], function(template){
	var str = '<ul>\
				<% if result === "success" %>\
					<% each list val key %>\
					<li>姓名：<% val.name %> 职业：<% val.career %></li>\
					<% /each %>\
				<% /if %>\
			</ul>';
	var data = {result:'success', list:[{
		name:'yinjiazeng',
		career:'jser'
	}, {
		name:'liumengmei',
		career:'f2er'
	}]}
	document.getElementById('content').innerHTML = tpl.render(str, data)
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 说明</h3>
			<div class="e-mt15 f-lh22">
				<p>渲染数据必须是数组或者JSON对象。</p>
				<p>推荐在js文件中创建模板作为独立模块，这样就避免了页面包含大量的script模版标签</p>
			</div>
			<h2 class="e-pt20 e-pb10 f-fs22 f-bb" id="语法">语法</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 输出值</h3>
<script type="text/highlight" data-javascript-options>
<% value %>
<% list[0] %>
<% data.result %>
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 声明变量</h3>
			<div class="e-mt15 f-lh22">
				<p>声明的变量名不要和渲染数据的属性名相同，不然属性值会被覆盖。</p>
				<p>声明的变量不会被输出。</p>
			</div>
<script type="text/highlight" data-javascript-options>
<% var a = 1, b = 2 %>
//使用变量
<% a+b %> //3

//声明函数
<% 
	var func = function(a){
		return 1+a
	}
%>
//使用函数
<% func(2) %> //3
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 双问号</h3>
			<div class="e-mt15 f-lh22">
				<p>在渲染模版时，一些属性在某些情况下是不存在的，如果直接在模版中使用会报未定义错误，用typeof判断会导致模版可读性变差，因此可以在变量后面加双问号“??”替代typeof</p>
				<p>输出值时使用双问号，若变量不存在则输出空字符串，其它情况均作为布尔值返回</p>
			</div>
<script type="text/highlight" data-javascript-options>
<% if name?? %>
	<%name%>
<% /if %>

<%name??%>
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 遍历</h3>
			<div class="e-mt15 f-lh22">
				<p>当渲染数据为数组时，可使用$list操作该数组</p>
				<p>遍历不声明键值变量时，可使用$value和$index分别操作值和键</p>
			</div>
<script type="text/highlight" data-javascript-options>
<% each list val key %>
	<% key %>:<% val %>
<% /each %>

<% each $list %>
	<% $index %>:<% $value %>
<% /each %>
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 判断</h3>
<script type="text/highlight" data-javascript-options>
<% if key == 0 %>
	<% vlaue %>
<% elseif key == 1 %>
	<% vlaue %>
<% else %>
	<% vlaue %>
<% /if %>
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 三目运算</h3>
<script type="text/highlight" data-javascript-options>
<% key == 0 ? 1 : 2 %>
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 方法调用</h3>
			<div class="e-mt15 f-lh22">
				<p><a href="#method" class="f-corange f-tdu">如何创建方法？</a></p>
				<p>1、使用时“|”两边必须加空格</p>
			</div>
<script type="text/highlight" data-javascript-options>
<% 方法名 | 参数1, 参数2, ... %>

<%var num = 0%>
//表达式中使用时必须用括号括起来
<% num = (方法名 | 参数1, 参数2, ...) %>
</script>
			<div class="e-mt15 f-lh22">
				<p>2、使用$method</p>
			</div>
<script type="text/highlight" data-javascript-options>
$method.方法名(参数1, 参数2, ...)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 导入模板</h3>
<script type="text/highlight" data-javascript-options>
<% include '模板id' %>
</script>
			<h2 class="e-pt20 e-pb10 f-fs22 f-bb" id="方法">方法</h2>
			<p class="e-mt15 f-lh22">渲染script模板</p>
<script type="text/highlight" data-javascript-options>
template(tplid, data?, options?)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>tplid</td>
					<td>String</td>
					<td>模版id</td>
				</tr>
				<tr>
					<td>data</td>
					<td>Array, Object</td>
					<td>渲染数据</td>
				</tr>
				<tr>
					<td>options</td>
					<td>Object</td>
					<td>模版配置参数</td>
				</tr>
			</table>
			<h2 class="e-pt20 e-pb10 f-fs22 f-bb" id="render">render</h2>
			<p class="e-mt15 f-lh22">渲染模板</p>
<script type="text/highlight" data-javascript-options>
template.render(tmpl, data?, options?)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>tmpl</td>
					<td>String</td>
					<td>模板字符串</td>
				</tr>
				<tr>
					<td>data</td>
					<td>Array, Object</td>
					<td>渲染数据</td>
				</tr>
				<tr>
					<td>options</td>
					<td>Object</td>
					<td>模版配置参数</td>
				</tr>
			</table>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 说明</h3>
			<p class="e-mt15 f-lh22">如果模板中include非script模板，则需要通过call或者apply方法调用</p>
<script type="text/highlight" data-javascript-options>
var tpls = {
	tpl1:renders({
		<p>模板1</p>
	}),
	tpl2:renders({
		<p>模板2</p>
	})
}
var tmpl = renders({
	<div>
		<% include 'tpl1' %>
		<% include 'tpl2' %>
	</div>
})
template.render.call(tpls, tmpl)
</script>
			<h2 class="e-pt20 e-pb10 f-fs22 f-bb" id="method">method</h2>
			<p class="e-mt15 f-lh22">添加模板方法</p>
<script type="text/highlight" data-javascript-options>
template.method(name, callback)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>name</td>
					<td>String</td>
					<td>方法名</td>
				</tr>
				<tr>
					<td>callback</td>
					<td>Function</td>
					<td>处理回调</td>
				</tr>
			</table>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 举个栗子</h3>
			<p class="e-mt15 f-lh22">将手机号码中间4位加密</p>
<script type="text/highlight" data-javascript-options>
template.method('filter', function(mobile){
	return mobile.replace(/(\d{3})\d{4}(\d+)/, '$1****$2')
})

//使用
<% each $list %>
name:<% $value.name %>
mobile:<% filter | $value.mobile %>
mobile:<% $method.filter($value.mobile) %>
<% /each %>
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 内置方法</h3>
			<p class="e-mt15 f-lh22">过滤空格，用法参考<a class="f-corange" href="api.html#trim">Nui.trim</a></p>
<script type="text/highlight" data-javascript-options>
<% trim | string %>
</script>
			<p class="e-mt15 f-lh22">格式化日期，用法参考<a class="f-corange" href="util.html#formatDate">formatDate</a></p>
<script type="text/highlight" data-javascript-options>
<% formatDate | timestamp, format %>
</script>
			<p class="e-mt15 f-lh22">设置url参数，用法参考<a class="f-corange" href="util.html#setParam">setParam</a></p>
<script type="text/highlight" data-javascript-options>
<% setParam | name, value, url %>
</script>
			<p class="e-mt15 f-lh22">四舍五入保留小数，用法参考<a class="f-corange" href="util.html#toFixed">toFixed</a></p>
<script type="text/highlight" data-javascript-options>
<% toFixed | digit, decimal, number %>
</script>
			<h2 class="e-pt20 e-pb10 f-fs22 f-bb" id="config">config</h2>
			<p class="e-mt15 f-lh22">配置全局参数</p>
<script type="text/highlight" data-javascript-options>
template.config(key, value?)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>key</td>
					<td>String, Object</td>
					<td>参数名或者参数集合</td>
				</tr>
				<tr>
					<td>value</td>
					<td>String</td>
					<td>参数值</td>
				</tr>
			</table>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 模板默认参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">默认值</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>openTag</td>
					<td>&lt;%</td>
					<td>模板开始标签</td>
				</tr>
				<tr>
					<td>closeTag</td>
					<td>%&gt;</td>
					<td>模板闭合标签</td>
				</tr>
			</table>
			<h2 class="e-pt20 e-pb10 f-fs22 f-bb" id="性能测试">性能测试</h2>
			<div class="e-mt15 f-lh22">
				<p>
					<input type="text" class="input piece" style="padding:0 8px; width:50px; height:24px; border:1px solid #ddd;" value="10000" />
					条数据
					<input type="text" class="input count" style="padding:0 8px; width:50px; height:24px; border:1px solid #ddd;" value="10" />
					次渲染与其它模版引擎耗时对比 <button class="ui-button e-ml10" id="start">执行</button></p>
				<p>IE6/7下不要用大数据测试，否则会导致崩溃，建议最大300*10</p>
			</div>
<script type="text/highlight" data-javascript-options>
[
	{
		k1:v1, 
		v2:v2, 
		...10个属性
	}, 
	...10000条数据
]
</script>
			<div id="data" style="height:280px;"></div>
			<div id="nui" style="display:none;"></div>
			<div id="dot" style="display:none;"></div>
			<div id="art" style="display:none;"></div>
		</div>	
	</div>
	
	
<div class="f-fl g-sidecol">
    <div class="side">
        <ul class="m-menu f-lh28">
            <li>
                <a class="f-fs16" href="/nui/pages/">介绍</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/doc.html">API文档</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/util.html">实用工具</a>
                
            </li>
            <li>
                <a class="f-fs16 s-crt" href="/nui/pages/template.html">模板引擎</a>
                
                <ul>
                    <li>
                        <a href="#快速上手">快速上手</a>
                    </li>
                    <li>
                        <a href="#语法">语法</a>
                    </li>
                    <li>
                        <a href="#方法">方法</a>
                        <ul>
                            <li>
                                <a href="#render">render</a>
                            </li>
                            <li>
                                <a href="#method">method</a>
                            </li>
                            <li>
                                <a href="#config">config</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#性能测试">性能测试</a>
                    </li>
                </ul>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/events.html">代理事件</a>
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/element.html">页面元素</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/components/">交互组件</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/pack.html">打包工具</a>
                
            </li>
        </ul>
    </div>
</div>


	</div>
	<!-- /content -->

	

    <script type="text/javascript" src="/nui/assets/script/jquery.min.js?v=4223d4c"></script>
<script type="text/javascript" src="/nui/dist/nui-load-min.js?v=94ae756"></script>
<script type="text/javascript" src="/nui/config.js?v=dc7a57a"></script>
    
    <script type="text/javascript">
	Nui.load("{script}/base-min", function(page){
        page.init()
    })
    </script>
    
<script src="/nui/assets/script/echarts.min.js?v=899e557"></script>
<script src="/nui/assets/script/template/artTemplate.js?v=d03cebe"></script>
<script src="/nui/assets/script/template/baiduTemplate.js?v=82e95db"></script>
<script src="/nui/assets/script/template/juicer.js?v=cb37435"></script>
<script src="/nui/assets/script/template/handlebars.js?v=f08c62a"></script>
<script src="/nui/assets/script/template/doT.js?v=05036fa"></script>

    <script type="text/javascript">
    
Nui.load("./script/template/page-min")

    </script>
</body>
</html>